import React from 'react';
import Albumchlid from './albumchild'
import Axios from 'axios';
import { Pagination} from 'element-react';

class Alubm extends React.Component{
	constructor(props){
        super(props);
        this.state={
            res:'',
        }
    }
	componentWillMount(){
		var that =this;
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/getalbum',
			dataType:'json'
		}).then(function(res){
			that.setState({
				res:res.data,
			})
		})	
	}
	onCurrentChange(currentPage){
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/getalbum',
            data:{page:currentPage},
			dataType:'json'
		}).then((res)=>{
            this.setState({
                res:res.data
            })
        })
    }
    render(){
		var _res = this.state.res.rows;
        var html=[];
        if(_res){
            for(var i=0;i<_res.length;i++){
                html.push(
                    <Albumchlid key={i} {..._res[i]}/>
                )
            }
        }
        return(
            <div className="cfbbbg">
				<div className="cfmain">
					<div className="cf_mod_tag">
						<div className="cf_tag__list">
							<h3 className="cf_tag__tit">语种</h3>
							<a href="javascript:;" className="c_tag__item c_tag__item--select">全部</a>
							<a href="javascript:;" className="c_tag__item">国语</a>
							<a href="javascript:;" className="c_tag__item">粤语</a>
							<a href="javascript:;" className="c_tag__item">英语</a>
							<a href="javascript:;" className="c_tag__item">韩语</a>
							<a href="javascript:;" className="c_tag__item">日语</a>
							<a href="javascript:;" className="c_tag__item">法语</a>
							<a href="javascript:;" className="c_tag__item">西班牙语</a>
						</div>
						<div className="cf_tag__list">
							<h3 className="cf_tag__tit">流派</h3>
							<a href="javascript:;" className="c_tag__item c_tag__item--select">全部</a>
							<a href="javascript:;" className="c_tag__item">流行</a>
							<a href="javascript:;" className="c_tag__item">古典</a>
							<a href="javascript:;" className="c_tag__item">爵士</a>
							<a href="javascript:;" className="c_tag__item">摇滚</a>
							<a href="javascript:;" className="c_tag__item">电子</a>
							<a href="javascript:;" className="c_tag__item">拉丁</a>
							<a href="javascript:;" className="c_tag__item">轻音乐</a>
							<a href="javascript:;" className="c_tag__item">世界音乐</a>
							<a href="javascript:;" className="c_tag__item">嘻哈</a>
							<a href="javascript:;" className="c_tag__item">原声</a>
						</div>
						<div className="cf_tag__list">
							<h3 className="cf_tag__tit">价格</h3>
							<a href="javascript:;" className="c_tag__item c_tag__item--select">全部</a>
							<a href="javascript:;" className="c_tag__item">免费</a>
							<a href="javascript:;" className="c_tag__item">付费</a>
						</div>
						<div className="cf_tag__list">
							<h3 className="cf_tag__tit">筛选</h3>
							<a href="javascript:;" className="c_tag__item shaixuan c_js_sub_tab" id="leibie">
								类别
								<i className="c_tag__arrow sprite"></i>
							</a>
							<a href="javascript:;" className="c_tag__item shaixuan c_js_sub_tab" id="niandai">
								年代
								<i className="c_tag__arrow sprite"></i>
							</a>
							<a href="javascript:;" className="c_tag__item shaixuan c_js_sub_tab" id="changpiangongsi">
								唱片公司
								<i className="c_tag__arrow sprite"></i>
							</a>
						</div>
						<div className="c_popup_tag">
							<div className="cf_tag__list">
								<a href="javascript:;" className="c_tag__item c_tag__item--select">全部</a>
								<a href="javascript:;" className="c_tag__item">国语</a>
								<a href="javascript:;" className="c_tag__item">粤语</a>
								<a href="javascript:;" className="c_tag__item">英语</a>
								<a href="javascript:;" className="c_tag__item">韩语</a>
								<a href="javascript:;" className="c_tag__item">日语</a>
								<a href="javascript:;" className="c_tag__item">法语</a>
								<a href="javascript:;" className="c_tag__item">西班牙语</a>
							</div>
						</div>
						<div className="c_popup_tag">
							<div className="cf_tag__list">
								<a href="javascript:;" className="c_tag__item c_tag__item--select">全部</a>
								<a href="javascript:;" className="c_tag__item">国语</a>
								<a href="javascript:;" className="c_tag__item">粤语</a>
								<a href="javascript:;" className="c_tag__item">英语</a>
								<a href="javascript:;" className="c_tag__item">韩语</a>
								<a href="javascript:;" className="c_tag__item">日语</a>
								<a href="javascript:;" className="c_tag__item">法语</a>
								<a href="javascript:;" className="c_tag__item">西班牙语2</a>
							</div>
						</div>
						<div className="c_popup_tag">
							<div className="cf_tag__list">
								<a href="javascript:;" className="c_tag__item c_tag__item--select">全部</a>
								<a href="javascript:;" className="c_tag__item">国语</a>
								<a href="javascript:;" className="c_tag__item">粤语</a>
								<a href="javascript:;" className="c_tag__item">英语</a>
								<a href="javascript:;" className="c_tag__item">韩语</a>
								<a href="javascript:;" className="c_tag__item">日语</a>
								<a href="javascript:;" className="c_tag__item">法语</a>
								<a href="javascript:;" className="c_tag__item">西班牙语1</a>
							</div>
						</div>
					</div>
					<div className="c_mod_part_detail">
						<div className="c_part_detail__hd">
							<h2 className="c_part_detail__tit">全部专辑</h2>
							<div className="c_part_switch c_js_sort">
								<a href="javascript:;" className="c_part_switch__item c_part_switch__item--left c_part_switch__item--select">最新</a>
								<a href="javascript:;" className="c_part_switch__item c_part_switch__item--right">最热</a>
							</div>
						</div>
						<div className="c_mod_playlist c_mod_playlist--all">
							<ul className="c_playlist__list">
								
								{html}
							</ul>
						</div>
						<Pagination layout="prev, pager, next" total={this.state.res.total} pageSize={20} onCurrentChange={this.onCurrentChange.bind(this)}/>
					</div>
				</div>
				</div>
        )
    }
    componentDidMount(){
		function handlerColor(){
			var mine = document.getElementsByClassName('top_nav__item--mine')[0];
			var room = document.getElementsByClassName('top_nav__item--room')[0];
			mine.onclick=function(){
				this.style="background-color: #31c27c;color: #fff;"
				room.style="background-color: #fff;color: #333;"
			};
			room.onclick=function(){
				this.style="background-color: #31c27c;color: #fff;"
				mine.style="background-color: #fff;color: #333;"
			}
			
		}
		handlerColor();
		
		function shaiXuan(){
			var shaixuan = document.getElementsByClassName('shaixuan');
			var box = document.getElementsByClassName('c_popup_tag');
			var arrow = document.getElementsByClassName('c_tag__arrow');
			var doc = document.getElementsByClassName('cfmain')[0];
			var btn = document.getElementsByClassName('c_part_switch__item');
			for(var k = 0;k<btn.length;k++){

					btn[k].onclick=function(){
						for(var z = 0;z<btn.length;z++){
							btn[z].classList.remove("c_part_switch__item--select");
						}
						this.classList.add("c_part_switch__item--select");
					}

			}
			var a1=true;
			var a2=true;
			var a3=true;
			document.onclick=function(e){
				var e= window.event || event;
				if(e.srcElement.id==='leibie'){
					
					if(a1){
						for(var j = 0 ; j<shaixuan.length;j++){
							box[j].style.display='none';
							shaixuan[j].classList.remove("c_tag__item--select");
							arrow[j].classList.remove("active2234");
						}
						box[0].style.display='block';
						shaixuan[0].classList.add("c_tag__item--select");
						arrow[0].classList.add("active2234");
						a1=false;
						a2=true;
						a3=true;
					}else{
						for(var j = 0 ; j<shaixuan.length;j++){
							shaixuan[j].classList.remove("c_tag__item--select");
							arrow[j].classList.remove("active2234");
						}
						box[0].style.display='none';
						a1=true;
					}
				}else if(e.srcElement.id==='niandai'){
					
					if(a2){
						for(var j = 0 ; j<shaixuan.length;j++){
							box[j].style.display='none';
							shaixuan[j].classList.remove("c_tag__item--select");
							arrow[j].classList.remove("active2234");
						}
						box[1].style.display='block';
						shaixuan[1].classList.add("c_tag__item--select");
						arrow[1].classList.add("active2234");
						a2=false;
						a1=true;
						a3=true;
					}else{
						for(var j = 0 ; j<shaixuan.length;j++){
							shaixuan[j].classList.remove("c_tag__item--select");
							arrow[j].classList.remove("active2234");
						}
						box[1].style.display='none';
						a2=true;
					}
				}else if(e.srcElement.id==='changpiangongsi'){
					
					if(a3){
						for(var j = 0 ; j<shaixuan.length;j++){
							box[j].style.display='none';
							shaixuan[j].classList.remove("c_tag__item--select");
							arrow[j].classList.remove("active2234");
						}
						box[2].style.display='block';
						shaixuan[2].classList.add("c_tag__item--select");
						arrow[2].classList.add("active2234");
						a3=false;
						a1=true;
						a2=true;
					}else{
						for(var j = 0 ; j<shaixuan.length;j++){
							shaixuan[j].classList.remove("c_tag__item--select");
							arrow[j].classList.remove("active2234");
						}
						box[2].style.display='none';
						a3=true;
					}
				}else{
					for(var j = 0 ; j<shaixuan.length;j++){
						shaixuan[j].classList.remove("c_tag__item--select");
						arrow[j].classList.remove("active2234");
						box[j].style.display='none';
					}
					 a1=true;
					 a2=true;
					 a3=true;
				}
			}
		}
		shaiXuan();
	}
}

export default Alubm;